<template>
  <div class="body">
    <div>
      <van-nav-bar style="background:#ee6940;" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="setting-2"></div>
    <div class="setting-1"></div>
    <div class="setting">
      <van-row gutter="20" style="border-bottom: 2px #EB6D47 dashed;">
        <van-col class="lane" span="8">
          上海
          <br />
          <p>09 : 23</p>
        </van-col>
        <van-col span="8" style="text-align:center;line-height:33px ;">
          <img style="width:40px;padding-top:10px" src="../assets/img/形状1.png" alt />
        </van-col>
        <van-col style="text-align: right" class="lane" span="8">
          北京
          <br />
          <p>11 : 12</p>
        </van-col>
      </van-row>
      <div style="display: flex;padding-top:28px">
        <img style="width:20px;height:20px;" src="../assets/img/形状2.png" alt />
        <p style="padding-left:20px;color:#999999">深圳宝安国际机场</p>
      </div>
      <div style="display: flex;padding-top:18px;justify-content: space-between;">
        <div style="display: flex;">
          <img style="width:20px;height:20px;" src="../assets/img/形状3.png" alt />
          <p style="padding-left:20px;color:#999999">2016.09.10 11:00</p>
        </div>
        <div style="display: flex;">
          <img style="width:20px;height:20px;" src="../assets/img/形状4.png" alt />
          <p style="padding-left:10px;color:#999999">头等舱</p>
        </div>
      </div>
      <van-row gutter="20" style="border-bottom: 2px #EB6D47 dashed;padding-top:30px">
        <van-col style="font-size:13px;color:#999999" span="8">
          航班
          <br />
          <p style="font-size:21px;color:#ED6D47">SZ265</p>
        </van-col>
        <van-col span="8" style="text-align: center;font-size:13px;color:#999999">
          航班
          <br />
          <p style="font-size:21px;color:#ED6D47">13K</p>
        </van-col>
        <van-col style="text-align: right;font-size:13px;color:#999999" span="8">
          航班
          <br />
          <p style="font-size:21px;color:#ED6D47">28</p>
        </van-col>
      </van-row>
    </div>
    <van-button class="button1" round size="large">确定定制</van-button>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      active: 1
    };
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
img {
  width: 100%;
  height: 100%;
}
.body {
  width: 375px;
  height: 667px;
  background: url(../assets/img/矩形9.png);
  position: relative;
}
.setting {
  width: 272px;
  height: 286px;
  border: black 0px solid;
  background: url(../assets/img/圆角矩形1拷贝3.png);
  position: absolute;
  bottom: 242px;
  left: 52px;
  font-size: 15px;
  padding-top: 62px;
}
.setting-1 {
  width: 302px;
  height: 386px;
  border: black 0px solid;
  background: url(../assets/img/圆角矩形1拷贝2.png);
  position: absolute;
  bottom: 190px;
  left: 36px;
}
.setting-2 {
  width: 335px;
  height: 430px;
  border: black 0px solid;
  background: url(../assets/img/圆角矩形1拷贝.png);
  position: absolute;
  bottom: 132px;
  left: 20px;
}
.lane {
  font-size: 20px;
  font-weight: 900;
  color: #ec6c45;
}
.lane > p {
  font-size: 13px;
  color: #999999;
  font-weight: 100;
}
.button1 {
  width: 274px;
  left: 51px;
  position: absolute;
  bottom: 180px;
  background: #f3b6ab;
  font-size: 21px;
  color: #ffffff;
  font-weight: 900;
}
</style>